<template>
  <div class="customer_list">
    <!-- 固定搜索栏 -->
    <div class="search-bar">
      <!--      <div class="search-input">-->
      <!--        <i class="search-icon">-->
      <!--          <van-icon name="search"/>-->
      <!--        </i>-->
      <!--        <input type="text" placeholder="请输入客户信息" v-model="sval">-->
      <!--      </div>-->

      <van-search :placeholder="`请输入${searchPh}`" shape="round" background="#ffffff" class="custom-search" v-model="sval" @search="onSearch" @clear="onCancel">
        <template #left-icon>
          <van-icon name="search" color="#999" size="16" />
        </template>
      </van-search>

      <div class="search-icons">
        <i class="icon-filter" @click="showSearchPopup"> <img :src="require('@/assets/filter.png')" /></i>
        <!-- <i class="icon-location" @click="toggleLocationBar"><img :src="require('@/assets/map.png')" /></i> -->
        <i class="icon-check" @click="toggleCheckMode"><img :src="require('@/assets/right.png')" /></i>
      </div>
    </div>
    <div class="gap"></div>

    <!-- 位置选择栏 -->
    <div id="mapcontainer" class="location-bar" :class="{ 'location-bar-fixed': showLocationBar }" v-show="showLocationBar">
      <!--      <span>当前位置选择</span>-->
    </div>

    <!-- 可滚动的内容区域 -->
    <!--      <div class="scrollable-content" >-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="" class="pull-refresh-container" :class="{ 'has-location-bar': showLocationBar }">
      <van-list v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad">

        <!-- <div class="customer-item" v-for="(item,index) in list" :key="index" @click="openCard(item[idobject + '_id'])"> -->
        <!-- {{idobject}} -->
        <!-- {{item}} -->
        <div class="customer-item" v-for="(item, index) in list" :key="index" @click="openCard(item.id)">
          <label class="checkbox-wrapper" v-show="showCheckMode" @click.stop="">
            <input type="checkbox" v-model="selectedItems" :value="item.id" class="custom-checkbox">
            <span class="checkmark"></span>
          </label>
          <div class="customer-info">
            <div class="top">
              <div class="company-name">
                {{ item.sname }}
              </div>
              <div class="right">
                <div class="contact">{{ item.contact }}</div>
                <div v-if="item.contact" class="avatar"><img :src="item.img"></div>
              </div>
            </div>
            <div class="address">
              {{ item.saddress }}
              <span class="nav-tag" @click.stop.prevent="navigate(item)">导航</span>
            </div>
            <div class="visit-info">
              <!--              访问频率：{{ item.visitFreq }}-->
              <span v-if="item.visitFreq">访问频率：每月{{ item.visitFreq }}次</span>
              <!--              <span class="visit-date">最近拜访时间：{{ item.lastVisit }}</span>-->
              <span v-if="item.lastVisit" class="visit-date">最近拜访时间：2024-09-07</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <!--      </div>-->

    <!-- 底部操作栏 -->
    <div class="bottom-actions" v-show="showCheckMode">
      <label class="checkbox-wrapper select-all">
        <input type="checkbox" v-model="selectAll" class="custom-checkbox">
        <span class="checkmark"></span>
        <span class="selectall">全选</span>
      </label>
      <button class="modify-btn" @click="changeFreq">修改频率</button>
      <button class="cancel-btn" @click="cancelSelection">取消</button>
      <div class="more-actions" @click="toggleMoreActions">
        <i class="more-icon"><img :src="require('@/assets/three_dots.png')" /></i>
        <!-- 更多操作弹出菜单 -->
        <div class="action-popup" v-show="showMoreActions">
          <div class="action-item" @click="generateBflx">生成路线</div>
          <div class="action-item" @click="share">共享</div>
          <div class="action-item" @click="transfer">转移</div>
        </div>
      </div>
    </div>

    <van-popup v-model="searchshow" position="right" style="width:90vw;height:100vh">
      <div style="padding-top:1vh;padding-left:1vw;padding-right:1vw;">
        <form action="">
          <!--<van-field clearable v-for="condition in conditiondata" :key="condition.viewcondition_id" v-model="condition.viewcondition_value" :label="condition.viewcondition_title"/>-->
          <template v-if="searchshow && conditiondata.length > 0">
            <van-tree-select height="55vh" :items="items" :main-active-index.sync="mainactive">
              mainactive: 0,
              <template #content>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_uitype" v-if="conditiondata[mainactive].viewcondition_uitype === 'int' || conditiondata[mainactive].viewcondition_uitype === 'double' || conditiondata[mainactive].viewcondition_uitype === 'money' || conditiondata[mainactive].viewcondition_uitype === 'percent'">
                  <van-cell-group>
                    <van-cell title="等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell title="!=" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'noteq'">
                      <template #right-icon>
                        <van-radio name="noteq" />
                      </template>
                    </van-cell>
                    <van-cell title="大于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'bt'">
                      <template #right-icon>
                        <van-radio name="bt" />
                      </template>
                    </van-cell>
                    <van-cell title="大于等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'bteq'">
                      <template #right-icon>
                        <van-radio name="bteq" />
                      </template>
                    </van-cell>
                    <van-cell title="小于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'lt'">
                      <template #right-icon>
                        <van-radio name="lt" />
                      </template>
                    </van-cell>
                    <van-cell title="小于等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'lteq'">
                      <template #right-icon>
                        <van-radio name="lteq" />
                      </template>
                    </van-cell>
                    <van-cell title="空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'empty'">
                      <template #right-icon>
                        <van-radio name="empty" />
                      </template>
                    </van-cell>
                    <van-cell title="非空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notempty'">
                      <template #right-icon>
                        <van-radio name="notempty" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_comparison" v-else-if="conditiondata[mainactive].viewcondition_uitype === 'bool'">
                  <van-cell-group>
                    <van-cell title="=" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell title="!=" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'noteq'">
                      <template #right-icon>
                        <van-radio name="noteq" />
                      </template>
                    </van-cell>
                    <van-cell title="空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'empty'">
                      <template #right-icon>
                        <van-radio name="empty" />
                      </template>
                    </van-cell>
                    <van-cell title="非空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notempty'">
                      <template #right-icon>
                        <van-radio name="notempty" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_comparison" v-else-if="conditiondata[mainactive].viewcondition_uitype === 'datetime'">
                  <van-cell-group>
                    <!--                        <van-cell    :value="date" v-model="conditiondata[mainactive].viewcondition_value" title="选择单个日期"  @click="calendarShow = true" />-->
                    <!--                        <van-calendar  v-model="calendarShow" :show-confirm="false" position="right"  @confirm="onCalendarConfirm"  />-->

                    <van-cell title="等于" clickable @click="setValueForDatetime('eq')">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>

                    <van-cell title="大于" clickable @click="setValueForDatetime('bt')">
                      <template #right-icon>
                        <van-radio name="bt" />

                      </template>
                    </van-cell>

                    <van-cell title="大于等于" clickable @click="setValueForDatetime('bteq')">
                      <template #right-icon>
                        <van-radio name="bteq" />

                      </template>
                    </van-cell>

                    <van-cell title="小于" clickable @click="setValueForDatetime('lt')">
                      <template #right-icon>
                        <van-radio name="lt" />
                      </template>
                    </van-cell>

                    <van-cell title="小于等于" clickable @click="setValueForDatetime('lteq')">
                      <template #right-icon>
                        <van-radio name="lteq" />
                      </template>
                    </van-cell>

                  </van-cell-group>
                </van-radio-group>
                <van-radio-group v-model="conditiondata[mainactive].viewcondition_comparison" v-else>
                  <van-cell-group>
                    <van-cell title="包含" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'in'">
                      <template #right-icon>
                        <van-radio name="in" />
                      </template>
                    </van-cell>
                    <van-cell title="不包含" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notin'">
                      <template #right-icon>
                        <van-radio name="notin" />
                      </template>
                    </van-cell>
                    <van-cell title="等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'eq'">
                      <template #right-icon>
                        <van-radio name="eq" />
                      </template>
                    </van-cell>
                    <van-cell v-if="(((idobject == 'dailyreports' || idobject == 'weekreports' || idobject == 'monthreport1') && items[mainactive]['text'] === '负责人') || (idobject == 'activity' && items[mainactive]['text'] === '拜访执行人') || (idobject == 'xhjh' && items[mainactive]['text'] === '负责人') || (idobject == 'xsjhn' && items[mainactive]['text'] === '业务员') || (idobject == 'cptd' && items[mainactive]['text'] === '负责人'))" title="等于参照" clickable @click="setValueForRef('inby')">
                      <template #right-icon>
                        <van-radio name="inby" />
                      </template>
                    </van-cell>
                    <van-cell title="不等于" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'noteq'">
                      <template #right-icon>
                        <van-radio name="noteq" />
                      </template>
                    </van-cell>
                    <van-cell title="空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'empty'">
                      <template #right-icon>
                        <van-radio name="empty" />
                      </template>
                    </van-cell>
                    <van-cell title="非空" clickable @click="conditiondata[mainactive].viewcondition_comparison = 'notempty'">
                      <template #right-icon>
                        <van-radio name="notempty" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-radio-group>

                <van-field v-model="conditiondata[mainactive].viewcondition_value" placeholder="请输入" />

              </template>
            </van-tree-select>
          </template>
          <div style="background:rgb(244,244,244);height:1vh"></div>
          <div style="padding-top:1vh;padding-left:2vw;padding-bottom:1vh;font-size:14px;">
            <van-radio-group v-model="radiovalue" direction="horizontal">
              <van-radio name="asc" icon-size="14px">升序</van-radio>
              <van-radio name="desc" icon-size="14px">降序</van-radio>
            </van-radio-group>
          </div>
          <input type="button" style="margin:1vw;width:27vw" :class="orderby == condition.viewcondition_field ? 'van-button van-button--info van-button--small' : 'van-button van-button--default van-button--small'" v-for="condition in conditiondata" :key="condition.index" @click="chooseOrder(condition.viewcondition_field)" :value="condition.viewcondition_title" />
          <div style="background:rgb(244,244,244);height:1vh"></div>
          <!--          <button type="button" style="margin:1vw;" v-for="tag in searchtags" @click="chooseTag(tag.id)" :key="tag.id" :class="tag.tagclass.replaceAll('tag-large', 'tag-list')" >{{ tag.sname }}<van-icon v-if="!(!searchedtags[tag.id])" name="success" /></button>-->
          <div style="background:rgb(244,244,244);height:1vh"></div>
          <!-- 不能使用van-button -->
          <input type="button" style="margin:1vw;width:27vw" class="van-button van-button--info van-button--small" value="查询" @click="query" />
          <input type="button" style="margin:1vw;width:27vw" class="van-button van-button--default van-button--small" value="清空" @click="clearquery" />
          <input type="button" style="margin:1vw;width:27vw" class="van-button van-button--default van-button--small" value="关闭" @click="searchshow = false" />
        </form>
      </div>
    </van-popup>

    <div class="popup-overlay" v-show="changefreqshow">
      <div class="popup-content">
        <!-- 添加关闭按钮 -->
        <div class="close-btn" @click="closefreqcount">×</div>

        <div class="popup-title">修改月拜访频率</div>
        <div class="popup-input">
          <input type="number" v-model="freqcount" placeholder="请输入每月拜访次数">
        </div>
        <div class="popup-actions">
          <button class="btn-cancel" @click="closefreqcount">取消</button>
          <button class="btn-confirm" @click="confirmChangeFreq">确定</button>
        </div>
      </div>
    </div>

    <van-tabbar v-model="active" safe-area-inset-bottom >
      <template >

        <van-tabbar-item @click="openNew">新增</van-tabbar-item>
      </template>
    </van-tabbar>

  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, Icon, SwipeCell, Dialog, RadioGroup, Radio, CellGroup, Grid, GridItem, DropdownMenu, DropdownItem, TreeSelect, DatetimePicker, Picker } from 'vant'
import qs from 'qs'
import * as dd from 'dingtalk-jsapi'

Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(Icon).use(SwipeCell).use(Dialog).use(Radio).use(RadioGroup).use(CellGroup).use(Grid).use(GridItem).use(DropdownMenu).use(DropdownItem).use(TreeSelect).use(DatetimePicker).use(Picker)

export default {
  name: 'CustomerList',
  data () {
    return {
      searchPh: '客户信息',
      title: this.$route.query.stitle,
      idobject: this.$route.query.idobject,
      idtemplate: this.$route.query.idtemplate,
      extract: this.$route.query.extract,
      sval: '',
      selectedItems: [],
      conditiondata: [],
      showMoreActions: false,
      showLocationBar: false,
      center: [116.417755, 40.069894],
      showCheckMode: false, // 添加这个控制显示/隐藏的状态变量，默认为 false
      isLoading: false,
      startline: 1,
      pagecount: 20,
      finished: false,
      loading: false,
      orderby: '',
      radiovalue: 'desc',
      value1: '',
      map: null,
      markers: [],
      searchshow: false,
      searchtags: [],
      searchedtags: {},
      items: [],
      mainactive: 0,
      list: [
      ],
      // 是否弹出修改框
      changefreqshow: false,
      // 修改的频率值
      freqcount: '',
      // 目前的操作
      operation: '',
      isMapMoving: false,
      moveEndTimer: null
    }
  },
  computed: {
    selectAll: {
      get () {
        return this.selectedItems.length === this.list.length
      },
      set (value) {
        this.selectedItems = value
          ? this.list.map(item => item.id)
          : []
      }
    }
  },
  methods: {
    openNew () {
      // this.sdshow = false
      this.$router.push({ name: 'new', query: { stitle: this.title, idobject: this.idobject, idtemplate: this.idtemplate } })
    },
    openCard (itemid) {
      // //console.log('&&&', itemid)

      // return

      this.$router.push({ name: 'card', query: { stitle: this.title, itemid: itemid, idobject: this.idobject, idtemplate: this.idtemplate } })
    },
    chooseOrder (value) {
      this.orderby = value
    },
    closefreqcount () {
      this.changefreqshow = false
      this.freqcount = ''
    },
    navigate (item) {
      this.$router.push({ name: 'bflxnavigate', query: { item: item, idobject: this.idobject } })
    },
    changeFreq () {
      if (!this.selectedItems || this.selectedItems.length <= 0) {
        Toast('请先选择客户')
        return
      }
      this.changefreqshow = true
    },
    cancelSelection () {
      // this.selectedItems = []
      this.showCheckMode = false
    },
    transfer () {
      if (!this.selectedItems || this.selectedItems.length <= 0) {
        Toast('请先选择客户')
        return
      }
      this.operation = 'transfer'
      this.$router.push({
        name: 'ref',
        params: {
          bo: 'employee',
          tobo: 'account',
          field: 'idowner',
          fieldref: '',
          viewid: '',
          conditionVal: '',
          conditionValHidden: 'sname:in:',
          classname: ''
        }
      })
    },
    share () {
      if (!this.selectedItems || this.selectedItems.length <= 0) {
        Toast('请先选择客户')
        return
      }
      this.operation = 'share'
      this.$router.push({
        name: 'orgRef',
        params: {
          bo: 'employee',
          tobo: 'account',
          field: 'idowner',
          fieldref: '',
          viewid: '',
          conditionVal: '',
          conditionValHidden: 'sname:in:',
          classname: ''
        }
      })
    },
    generateBflx () {
      if (!this.selectedItems || this.selectedItems.length <= 0) {
        Toast('请先拜访客户')
        return
      }
      // //console.log('this.selectedItems', this.selectedItems)
      let filteredList = this.list.filter(ea => this.selectedItems.some(eb => eb == ea.id))
      // //console.log('filteredList', filteredList)
      // 将原数组的key换成新的key
      const replaceKeys = (arr, keysMap) =>
        arr.map(obj =>
          Object.fromEntries(
            Object.entries(obj).map(([key, value]) => [keysMap[key] || key, value])
          )
        )
      const newKeysMap = { name: 'sname', address: 'saddress' }
      const newArray = replaceKeys(filteredList, newKeysMap)

      // //console.log('newArray', newArray)
      this.$router.push({
        name: 'bflxnew',
        query: { stitle: '添加拜访路线', idobject: 'bflx', selecteditems: newArray }
      })
    },
    confirmChangeFreq () {
      if (!this.freqcount) {
        Toast('请输入拜访频率')
        return
      }
      let data = {}
      data[this.idobject + '_bfpn'] = this.freqcount
      // 已选中的客户id
      data[this.idobject + '_customers'] = this.selectedItems.join(',')
      this.axios({
        method: 'post',
        url: '/api/' + this.idobject + '.changefreq.do',
        data: qs.stringify(data)
      }).then(res => {
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          //console.log(res)
          this.changefreqshow = false
          this.freqcount = ''
          Toast('修改月频率成功!')
          this.onRefresh()
        }
      }).catch(res => {
        this.reserror(res)
        this.changefreqshow = false
        this.freqcount = ''
      })
    },
    onSearch () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.onLoad()
      this.showForm = false
    },
    showSearchPopup () {
      //console.log('conditiondata:' + this.conditiondata)
      if (this.conditiondata.length === 0) {
        let data = {}
        this.axios({
          method: 'post',
          url: '/api/' + this.idobject + '.query.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === '1') {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          } else {
            //console.log(res)
            this.searchtags = res.data.tags
            this.conditiondata = res.data.jsondata
            if (res.data.viewcondition?.length > 0) {
            this.searchPh = res.data.viewcondition.map(i => i.viewcondition_title).join('/')
            }
            this.items = []
            if (this.conditiondata.length <= 0) {
              Toast('请先在开发平台配置高级查询条件')
              return
            }
            for (let i = 0; i < this.conditiondata.length; i++) {
              //console.log(this.conditiondata[i].viewcondition_title)
              this.items.push({ text: this.conditiondata[i].viewcondition_title })
            }
            this.searchshow = true
          }
        }).catch(res => {
          this.reserror(res)
        })
      } else {
        this.searchshow = true
      }
    },

    query () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.searchshow = false
      this.onLoad()
    },
    clearquery () {
      for (let i = 0; i < this.conditiondata.length; i++) {
        this.conditiondata[i].viewcondition_value = ''
      }
      // this.searchshow = false
      this.orderby = ''
    },
    onCancel () {
      this.sval = ''
    },
    onLoad () {
      return new Promise((resolve) => {
        //console.log('onload')
        // shownearby 控制是否过滤1公里内的列表 同时传wd jd
        let data = {
          'startline': this.startline,
          'pagecount': this.pagecount,
          'condition': this.sval,
          'orderby': this.orderby,
          'ascdesc': this.radiovalue,
          'viewoption': this.value1,
          'extract': this.extract,
          'tags': JSON.stringify(this.searchedtags),
          'shownearby': this.showLocationBar,
          'wd': this.center[1],
          'jd': this.center[0]
        }
        for (let i = 0; i < this.conditiondata.length; i++) {
          data[i + '_viewcondition_field'] = this.conditiondata[i].viewcondition_field
          data[i + '_viewcondition_relfield'] = this.conditiondata[i].viewcondition_relfield
          data[i + '_viewcondition_value'] = this.conditiondata[i].viewcondition_value
          data[i + '_viewcondition_comparison'] = this.conditiondata[i].viewcondition_comparison
          data[i + '_viewcondition_object'] = this.conditiondata[i].viewcondition_object
          data[i + '_viewcondition_uitype'] = this.conditiondata[i].viewcondition_uitype
        }
        /*
        averageCharWidth=fontSize×0.5（大约值，实际值可能需要调整）
        charsPerLine=averageCharWidth/divWidth
      */
        // data['countperline'] = Math.floor((screen.width - 32) * 2 / 3 / 12)
        //console.log('data:', data)
        /* let templatelength = this.conditiondata.length + 1
      if (this.idtemplate != null && this.idtemplate !== '' && this.idtemplate !== undefined) {
        data[templatelength + '_viewcondition_field'] = 'idtemplate'
        data[templatelength + '_viewcondition_relfield'] = ''
        data[templatelength + '_viewcondition_value'] = this.idtemplate
        data[templatelength + '_viewcondition_comparison'] = 'eqref'
        data[templatelength + '_viewcondition_object'] = ''
      } */

        this.axios({
          method: 'post',
          url: '/api/' + this.idobject + '.list.do',
          data: qs.stringify(data)
        }).then(async res => {
          //console.log('list res:', res)
          if (res.data.sdlist) {
            this.sdlist = res.data.sdlist
          }
          if (res.data.batop_new) {
            this.batop_new = res.data.batop_new
            //console.log('this.batop_new == true?', this.batop_new == true)
            //console.log('this.batop_new == false?', this.batop_new == false)
          }
          if (res.data.flag === '1') {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          } else {
            //console.log('res', res)
            this.isflow = res.data.jsondata.isflow
            let rsdata = res.data.jsondata.fieldValue

            let viewOptions = res.data.viewOptions
            this.value1 = res.data.viewoption
            //console.log(viewOptions)
            // this.option1 = []
            // for (let i = 0; i < viewOptions.length; i++) {
            //   this.option1.push({ text: viewOptions[i][1], value: viewOptions[i][0] })
            // }
            // this.indexflag = this.list.length
            // await this.ensureMapSize()
            for (let index = 0; index < rsdata.length; index++) {
              // this.list.push(rsdata[i])
              let data = rsdata[index]
              // //console.log('data', data)
              let item = {}
              item.id = data.id
              item.sname = data[this.idobject + '_sname']
              item.contact = data[this.idobject + '_idowner_ref']
              item.saddress = data[this.idobject + '_saddress']
              item.visitFreq = data[this.idobject + '_bfpn']
              item.lastVisit = data[this.idobject + '_zjbfsj']
              if (item.contact) {
                item.img = 'data:image/jpg;base64,' + data.spic
              }
              // //console.log('item', item)
              this.list.push(item)
            }
            // //console.log('this.schedules', this.schedules)

            if (rsdata == null || rsdata.length === 0 || rsdata.length < this.pagecount) {
              this.loading = false
              this.finished = true
            } else {
              this.startline = this.startline + rsdata.length
              this.loading = false
            }
            //console.log('this.markers', this.markers)
            // this.setMarkers(rsdata)
            resolve({ data: rsdata })
          }
          this.$store.commit('clearreload')
        }).catch(res => {
          this.reserror(res)
        })
      })
    },

    async onRefresh () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.isLoading = false
      //console.log('before onload')
      const response = await this.onLoad()
      //console.log('after onload')
      // 清除现有markers
      this.clearMarkers()
      // 创建新的markers
      //console.log('before createMarkers')
      await this.createMarkers(response.data)
      //console.log('after createMarkers')
      //console.log('this.markers', this.markers)
    },

    clearMarkers () {
      if (this.markers.length > 0) {
        this.markers.forEach(marker => {
          marker.setMap(null)
        })
        this.markers = []
      }
    },

    async createMarkers (rsdata) {
      if (!this.showLocationBar) return

      const markerList = []
      try {
        // console.group('设置 Markers')
        // console.log('初始数据:', {
        //   showLocationBar: this.showLocationBar,
        //   dataLength: rsdata?.length,
        //   mapInstance: !!this.map
        // })

        //console.log('rsdata:', rsdata)
        let img = require('@/assets/point.png')
        rsdata.forEach((data, index) => {
          const lnglat = new AMap.LngLat(
            data[this.idobject + '_jd'],
            data[this.idobject + '_wd']
          )

          //console.log('lnglat', lnglat)

          const sname = data[this.idobject + '_sname']

          const marker = new AMap.Marker({
            position: new AMap.LngLat(lnglat.lng, lnglat.lat),
            icon: new AMap.Icon({ image: img }),
            map: this.map,
            offset: new AMap.Pixel(-17, -42),
            label: {
              content: sname,
              direction: 'top',
              offset: new AMap.Pixel(0, 0), // 调整这个值使label紧贴marker顶部
              style: {
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                border: 'none',
                boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
                borderRadius: '4px',
                padding: '3px 8px',
                whiteSpace: 'nowrap',
                fontSize: '13px',
                fontWeight: '500',
                color: '#333',
                transform: 'translateY(-50%)', // 微调位置
                // 添加过渡效果
                transition: 'all 0.3s ease',
                // 鼠标悬停效果
                ':hover': {
                  backgroundColor: 'rgba(255, 255, 255, 1)',
                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
                }
              }
            }
          })

          // 标记点击事件
          const handleClick = () => {
            // Toast(sname)
            // 将当前marker设置为最高层级
            markerList.forEach(m => {
              m.setzIndex(100)
            })
            marker.setzIndex(200)
          }

          marker.on('click', handleClick)
          markerList.push(marker)
        })

        // 保存markers引用
        this.markers = markerList
      } catch (error) {
        console.error('Marker创建错误:', error)
      }

      console.groupEnd()
    },
    toggleCheckMode () {
      // if (!this.showLocationBar) {
      //   this.showCheckMode = !this.showCheckMode
      // } else {
      //   Toast('地图已开启,不可选中列表')
      //   this.showCheckMode = !this.showLocationBar
      // }
      if (this.showLocationBar) {
        Toast('地图已开启,不可选中列表')
        return
      }
      this.showCheckMode = true
    },
    toggleMoreActions () {
      this.showMoreActions = !this.showMoreActions
    },
    toggleLocationBar () {
      this.showLocationBar = !this.showLocationBar
      if (this.showCheckMode) {
        this.showCheckMode = false
      }

      this.onRefresh()
    },
    // 初始化地图，并根据地址定位
    async initMap () {
      return new Promise((resolve, reject) => {
        //console.log('initMap....')
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=e762e8d8003a79d26ece5f84b4afbfb0&plugin=AMap.Geocoder'
        document.body.appendChild(script)

        script.onload = () => {
          try {
            if (typeof AMap === 'undefined') {
              throw new Error('AMap is not loaded')
            }

            this.map = new AMap.Map('mapcontainer', {
              resizeEnable: true,
              zoom: 14,
              center: this.center,
              viewMode: '3D'
            })

            // 等待地图实例加载完成
            this.map.on('complete', async () => {
              //console.log('Map loaded completely')

              // 1. 确保地图容器尺寸正确
              await this.ensureMapSize()

              // 2. 设置中心点
              this.map.setCenter(this.center)

              // 3. 等待地图渲染完成
              // await new Promise(resolve => setTimeout(resolve, 100))
              // 暂时不显示当前位置
              // const markerDiv = document.createElement('div')
              // markerDiv.className = 'custom-marker'
              // markerDiv.style.zIndex = 100
              //
              // const pinDiv = document.createElement('div')
              // pinDiv.className = 'marker-pin-present'
              // markerDiv.appendChild(pinDiv)
              //
              // let currentMarker = new AMap.Marker({
              //   position: new AMap.LngLat(this.center[0], this.center[1]),
              //   content: markerDiv,
              //   anchor: 'bottom-center',
              //   zIndex: 100
              // })
              // currentMarker.element = markerDiv
              // currentMarker.setMap(this.map)
              // Toast('currentMarker', currentMarker.position)

              // 获取附近客户
              // this.fetchNearbyAccount(this.center)
              // this.onLoad()
              // this.onRefresh()
              resolve() // 解析Promise
            })

            // 添加拖动事件监听
            this.map.on('movestart', () => {
              //console.log('movestart:', 'xxxxxxxx')
              this.isMapMoving = true
            })

            // 监听地图移动结束
            this.map.on('moveend', () => {
              this.isMapMoving = false
              //console.log('moveend:', 'xxxxxxxx')
              let center = this.map.getCenter()
              //console.log('地图中心点:', center)
              this.center = [center.lng, center.lat]
              // this.fetchNearbyAccount([center.lng, center.lat])
              // this.onRefresh()
              this.handleMapMoveEnd()
            })

            // 添加地图点击事件来清除所有激活状态
            this.map.on('click', () => {
              this.markers.forEach((m, i) => {
                if (m.element) {
                  m.element.classList.remove('active')
                  m.element.style.zIndex = 100 + i
                  m.setzIndex(100 + i)
                }
              })
            })
          } catch (error) {
            reject(error)
          }
        }

        script.onerror = (error) => {
          reject(error)
        }
      })
    },

    // 处理地图移动结束事件
    handleMapMoveEnd () {
      // 清除之前的定时器
      if (this.moveEndTimer) {
        clearTimeout(this.moveEndTimer)
      }

      // 设置新的定时器，延迟200ms执行，防止频繁请求
      this.moveEndTimer = setTimeout(() => {
        this.onRefresh()
      }, 200)
    },
    ensureMapSize () {
      return new Promise((resolve) => {
        const maxAttempts = 30
        let attempts = 0

        const checkSize = () => {
          const container = document.getElementById('mapcontainer')
          if (!container) {
            console.error('找不到地图容器')
            resolve()
            return
          }

          if (container.offsetWidth > 0 && container.offsetHeight > 0) {
            //console.log('地图容器尺寸正常:', {
            //   width: container.offsetWidth,
            //   height: container.offsetHeight
            // })
            resolve()
          } else if (attempts < maxAttempts) {
            attempts++
            setTimeout(checkSize, 200)
          } else {
            //console.log('地图容器尺寸检查超时')
            resolve()
          }
        }

        checkSize()
      })
    },
    fetchNearbyAccount (center) {
      let data = {}
      data[this.idobject + '_wd'] = center[1]
      data[this.idobject + '_jd'] = center[0]

      this.axios({
        method: 'post',
        url: '/api/' + this.idobject + '.fetchnearbyaccounts.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log('附近客户数据:', res)

        // 清除之前的markers和active状态
        if (this.markers && this.markers.length) {
          this.markers.forEach(marker => marker.setMap(null))
          this.markers = []
        }

        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
          return
        }

        let marks = res.data.jsondata
        if (!marks || !marks.length) {
          //console.log('没有找到附近客户')
          return
        }

        // 创建新的markers
        this.markers = marks.map((data, index) => {
          // 创建容器div
          const markerDiv = document.createElement('div')
          markerDiv.className = 'custom-marker'
          markerDiv.style.zIndex = 100 + index

          // 创建文本div
          const textDiv = document.createElement('div')
          textDiv.className = 'marker-text'
          textDiv.textContent = data.name

          // 创建定位点div
          const pinDiv = document.createElement('div')
          pinDiv.className = 'marker-pin'

          markerDiv.appendChild(textDiv)
          markerDiv.appendChild(pinDiv)

          let marker = new AMap.Marker({
            position: new AMap.LngLat(data.jd, data.wd),
            content: markerDiv,
            anchor: 'bottom-center',
            zIndex: 100 + index
          })

          // 记录当前marker的DOM元素引用
          marker.element = markerDiv

          // 统一的激活函数
          const activateMarker = () => {
            // 重置所有marker的状态
            this.markers.forEach((m, i) => {
              if (m.element) {
                m.element.classList.remove('active')
                m.element.style.zIndex = 100 + i
                m.setzIndex(100 + i)
              }
            })

            // 激活当前marker
            markerDiv.classList.add('active')
            const topZIndex = 1000
            markerDiv.style.zIndex = topZIndex
            marker.setzIndex(topZIndex)

            // 平移地图使marker居中
            // this.map.setCenter([data.jd, data.wd])

            //console.log('选中客户:', data.name)
          }

          // 为整个marker容器添加点击事件
          markerDiv.addEventListener('click', (e) => {
            e.stopPropagation() // 防止事件冒泡
            activateMarker()
          })

          // 添加鼠标悬停效果
          const handleMouseOver = () => {
            if (!markerDiv.classList.contains('active')) {
              markerDiv.style.zIndex = 500 + index
              marker.setzIndex(500 + index)
            }
          }

          const handleMouseOut = () => {
            if (!markerDiv.classList.contains('active')) {
              markerDiv.style.zIndex = 100 + index
              marker.setzIndex(100 + index)
            }
          }

          markerDiv.addEventListener('mouseover', handleMouseOver)
          markerDiv.addEventListener('mouseout', handleMouseOut)

          // 将marker添加到地图
          marker.setMap(this.map)

          return marker
        })

        // 添加地图点击事件来清除所有激活状态
        this.map.on('click', () => {
          this.markers.forEach((m, i) => {
            if (m.element) {
              m.element.classList.remove('active')
              m.element.style.zIndex = 100 + i
              m.setzIndex(100 + i)
            }
          })
        })
      }).catch(res => {
        this.reserror(res)
      })
    },

    appendStyle () {
      const style = document.createElement('style')
      style.textContent = `
    .custom-marker {
      position: relative;
      width: auto;
      min-width: 120px;
      text-align: center;
      transform-origin: bottom center;
      transition: all 0.3s ease;
      z-index: 100;
      cursor: pointer; /* 添加手型光标 */
    }

    .custom-marker.active {
      transform: scale(1.2);
      z-index: 999 !important;
    }

    .marker-pin-present {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: red;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) translateY(50%);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .marker-pin-present::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid red;
    }


    .marker-pin {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #5790df;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) translateY(50%);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .marker-pin::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid #5790df;
    }

    .marker-text {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      color: #333;
      margin-bottom: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      border: 1px solid #eee;
      transition: all 0.3s ease;
      cursor: pointer; /* 添加手型光标 */
    }

    .custom-marker.active .marker-text {
      font-weight: bold;
      background: #f0f7ff;
      border-color: #5790df;
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
  `
      document.head.appendChild(style)
    }

  },
  created: function () {
    let _this = this
    document.title = _this.$route.query.stitle
    if (dd.env.platform !== 'notInDingTalk') {
      dd.ready(function () {
        dd.biz.navigation.setTitle({
          title: _this.$route.query.stitle
        })
      })
    }
  },
  activated () {
    //console.log('this.$store.state.ref_arr', this.$store.state.ref_id)
    let refId = this.$store.state.ref_id
    if (refId) {
      if (this.operation == 'transfer') {
        // 转移
        let data = {}
        data[this.idobject + '_ids'] = this.selectedItems.join(',')
        data[this.idobject + '_idowner'] = this.$store.state.ref_id
        //console.log('data', data)
        this.axios({
          method: 'post',
          url: '/api/' + this.idobject + '.transfer.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === 0) {
            Toast('转移成功')
            this.onRefresh()
          } else {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.$store.commit('clearRef')
        }).catch(res => {
          //console.log(res)
          this.$store.commit('clearRef')
        })
        this.operation = ''
      } else if (this.operation == 'share') {
        // 共享
        let data = {}
        data[this.idobject + '_ids'] = this.selectedItems.join(';')
        data[this.idobject + '_idowner'] = this.$store.state.ref_id
        //console.log('data', data)
        this.axios({
          method: 'post',
          url: '/api/' + this.idobject + '.share.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === 0) {
            Toast('共享成功')
            this.onRefresh()
          } else {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.$store.commit('clearRef')
        }).catch(res => {
          //console.log(res)
          this.$store.commit('clearRef')
        })
        this.operation = ''
      }
    }
  },
  mounted () {
    this.appendStyle()
    this.initMap()
      .then(() => {
        //console.log('Map initialized successfully')
      })
      .catch(error => {
        console.error('地图初始化失败:', error)
        Toast('地图加载失败，请刷新页面重试！')
      })
    // 点击外部关闭更多操作菜单
    document.addEventListener('click', (e) => {
      const moreActions = this.$el.querySelector('.more-actions')
      if (moreActions && !moreActions.contains(e.target)) {
        this.showMoreActions = false
      }
    })
  },
  beforeDestroy () {
    document.removeEventListener('click', this.closeMoreActions)
  }
}
</script>
<!--<style src="../assets/css/tags.css"></style>-->

<style lang="less" scoped>
.customer_list {
  background: #fff;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;

  // 搜索栏样式
  .search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 16px 12px 14px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    box-shadow: none; // 移除搜索栏的阴影，避免重叠
    justify-content: space-between;

    // 自定义 van-search 样式
    .custom-search {
      flex: 1;
      flex-grow: 1;
      margin-right: 16px;
      padding: 0;

      .van-cell {
        line-height: 36px !important;
      }

      :deep(.van-search__content) {
        background-color: #fff;
        padding: 0;
        height: 45px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;

        &:focus-within {
          border-color: #4080ff;
        }
      }

      :deep(.van-field__left-icon) {
        margin-left: 8px;
      }

      :deep(.van-field__input) {
        height: 43px;
        padding: 8px 12px 8px 4px;
        font-size: 14px;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        color: #333;

        &::placeholder {
          color: #999;
        }
      }
    }

    .search-icons {
      display: flex;
      gap: 20px;
      flex-shrink: 0;
      justify-content: space-around;
      color: #666;

      i {
        margin-right: 20px;
        cursor: pointer;
        font-size: 16px;

        &:last-child {
          margin-right: 0; // 最后一个元素不需要右边距
        }
      }
    }
  }

  .gap {
    height: 5px;
    background-color: #f0f0f0;
  }

  // 位置选择栏样式
  .location-bar {
    height: 400px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.3s ease;
    /* 添加过渡效果 */

    span {
      color: #666;
    }

    .amap-maps {
      width: 100% !important;
      height: 400px !important;
    }

    &.location-bar-fixed {
      position: fixed !important;
      top: 72px; // 修改这里，根据搜索栏的实际高度调整*/
      left: 0;
      right: 0;
      z-index: 99;
    }
  }

  /*.pull-refresh-container {*/
  /*  flex: 1;*/
  /*  overflow-y: auto;*/

  /*  &.has-location-bar {*/
  /*    padding-top: 330px;*/
  /*  }*/
  /*}*/
  // 可滚动内容区域
  .pull-refresh-container {
    padding-bottom: 20px;
    flex: 1;
    overflow-y: auto;

    &.has-location-bar {
      padding-top: 405px;
    }

    .van-pull-refresh {
      min-height: 100%;
    }

    .customer-item {
      display: flex;
      padding: 16px;
      border-bottom: 1px solid #f0f0f0;
      align-items: flex-start;

      .checkbox-wrapper {
        display: inline-flex;
        align-items: flex-start; // 修改为顶部对齐
        position: relative;
        cursor: pointer;
        user-select: none;
        padding-left: 25px;
        margin-right: 8px;
        margin-top: 3px; // 微调复选框的位置，使其与文本完美对齐
      }

      .customer-info {
        flex: 1;
        margin-left: 8px;

        .top {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: "Microsoft YaHei Bold";
          font-weight: 700;
          font-size: 16px;
          text-align: left;
          color: #000;
        }

        .company-name {
          font-family: "Microsoft YaHei Bold";
          font-weight: 700;
          font-size: 16px;
          text-align: left;
          color: #000;
          /*margin-bottom: 8px;*/
          display: flex;
          align-items: center;
          max-width: 200px;
        }

        .right {
          display: flex;
          align-items: center;

          .contact {
            /*margin-left: 12px;*/
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 14px;
            text-align: left;
            color: #000;
          }

          .avatar {
            /*margin-left: auto;*/
            width: 35px;
            height: 35px;
            background: #e1e1e1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 12px;
            margin-left: 5px;
          }

          img {
            width: 35px; // 设置图片宽度
            height: 35px; // 设置图片高度
            object-fit: cover; // 保持图片比例并填充容器
            display: block; // 消除图片底部间隙
          }
        }

        .address {
          margin-bottom: 12px;
          font-family: "Microsoft YaHei";
          font-weight: 400;
          font-size: 14px;
          line-height: 24px;
          text-align: left;
          color: #000;

          .building {
            color: #999;
          }

          .nav-tag {
            display: inline-block;
            margin-left: 8px;
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 16px;
            text-align: left;
            color: #015fe2;
          }
        }

        .visit-info {
          font-family: "Microsoft YaHei";
          font-weight: 400;
          font-size: 14px;
          line-height: 14px;
          text-align: left;
          color: #8e8e8e;

          .visit-date {
            margin-left: 16px;
          }
        }
      }
    }
  }

  // 复选框样式
  .checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    padding-left: 25px;
    margin-right: 8px;

    .custom-checkbox {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }

    .checkmark {
      position: absolute;
      left: 0;
      height: 18px;
      width: 18px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 9px;

      &:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 4px;
        height: 8px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }

    .custom-checkbox:checked~.checkmark {
      background: #5790df;
      border-color: #5790df;
    }

    .custom-checkbox:checked~.checkmark:after {
      display: block;
    }
  }

  // 底部操作栏样式
  .bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
    z-index: 99;
    justify-content: space-between;

    .selectall {
      margin-left: 8px;
      font-family: "Microsoft YaHei";
      font-weight: 400;
      font-size: 16px;
      text-align: left;
      color: #343434;
    }

    button {
      /*padding: 7px 16px;*/
      font-family: "Microsoft YaHei";
      font-weight: 400;
      font-size: 16px;
      text-align: left;

      margin-right: 12px;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 5px;

      &:disabled {
        background: #f5f5f5;
        color: #999;
        cursor: not-allowed;
      }

      &.modify-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 102px;
        height: 37px;
        color: #fff;
        background: #5790df;

        &:not(:disabled):hover {
          background: darken(#4080ff, 5%);
        }
      }

      &.cancel-btn {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 93px;
        height: 37px;
        border-radius: 5px;
        background: #5790df;

        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 16px;
        text-align: left;
        color: #fff;

        &:hover {
          background: darken(#f5f5f5, 5%);
        }
      }
    }

    .more-actions {
      position: relative;
      /*margin-left: auto;*/
      /*padding: 4px;*/
      cursor: pointer;

      .more-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #666;
        /*line-height: 1;*/
      }

      .action-popup {
        position: absolute;
        bottom: 100%;
        right: 0;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        margin-bottom: 29px;
        min-width: 120px;
        overflow: hidden;

        .action-item {
          padding: 10px 16px;
          color: #333;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}

.freq-popup {
  border-radius: 8px;
  overflow: hidden;
  background-color: #e0f7ff;

  /* 设置弹出框背景色为浅蓝色 */
  .freq-popup-content {
    padding: 20px;
    background-color: #e0f7ff;

    /* 设置内容背景色为浅蓝色 */
    .freq-title {
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 20px;
    }

    .freq-input {
      margin: 0 20px 25px;

      :deep(.van-field__control) {
        height: 40px;
        font-size: 16px;
        background: #f5f7fa;
        border-radius: 4px;
      }
    }

    .freq-actions {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;

      .freq-btn {
        flex: 1;
        height: 40px;
        font-size: 16px;
        border-radius: 4px;

        &.cancel {
          color: #5790df;
          /* 设置取消按钮文字颜色为蓝色 */
          border-color: #5790df;
          /* 设置取消按钮边框颜色为蓝色 */
          margin-right: 12px;
        }

        &.confirm {
          background-color: #5790df;
          /* 设置确定按钮背景色为蓝色 */
          color: #fff;
          /* 设置确定按钮文字颜色为白色 */
        }
      }
    }
  }
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .popup-content {
    box-sizing: border-box;
    width: 291px;
    height: 195px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #707070;
    padding: 20px;
    position: relative;

    .close-btn {
      position: absolute;
      top: -38px;
      right: -2px;
      width: 22px;
      height: 22.16px;
      /*background: #ebebeb;*/
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      font-size: 26px;
      font-weight: normal;
      border: 1px solid white;
      color: white;
      line-height: 1;
    }

    .popup-title {
      text-align: center;
      height: 50px;
      font-family: "Microsoft YaHei";
      font-weight: 400;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      color: #3e3e3e;
    }

    .popup-input {
      margin-bottom: 16px;

      input {
        margin: 0 auto;
        width: 218px;
        height: 50px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #dfdfdf;
        padding: 0 15px;
        text-align: center;
        font-size: 14px;

        &::placeholder {
          color: #999;
        }
      }
    }

    .popup-actions {
      display: flex;
      justify-content: space-between;
      gap: 15px;

      button {
        flex: 1;
        height: 40px;
        border-radius: 4px;
        border: none;
        font-size: 16px;
        cursor: pointer;

        &.btn-cancel {
          background: #f5f5f5;
          color: #333;
        }

        &.btn-confirm {
          background: #4086f4;
          color: white;
        }
      }
    }
  }
}
</style>
